<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Document</title>
    <link href="./swiper/swiper.css" rel="stylesheet">
    <style>
        html {
            overflow-x: hidden;
        }

        .swiper-slide {
            height: 500px;

        }

        .swiper-slide img {
            width: 100%;
            height: 100;
        }

    </style>
</head>
<body>
<div id="app">
    <common-head></common-head>
</div>
<script src="./vue.js"></script>
<script src="./axios.js"></script>
<script src="./swiper/swiper.js"></script>
<script>
    const CommonHead = {
        template: `
          <div>
          <h2 ref="title">mounted使用场景</h2>
          <div class="swiper my-swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="banner in banners" :key="banner.id">
                <img :src="banner.picUrl"/>
              </div>
            </div>
          </div>
          </div>
        `,
        data() {
            return {
                swiper: null,
                banners: []
            }
        },
        methods: {
            initSwiper() {
                // 初始化swiper
                this.swiper = new Swiper('.swiper', {})
            },
            fetchBanners() {
                axios.get('https://api.it120.cc/conner/banner/list').then(res => {
                    if (res.data.code === 0) {
                        this.banners = res.data.data
                        // 在这里重新初始化
                    }
                })
            }
        },
        watch: {
            banners() {
                // 在这里重新初始化swiper
                this.$nextTick(() => {
                    this.swiper.update();
                })
            }
        },
        created() {
            this.fetchBanners();
        },
        mounted() {
            this.initSwiper();
        }
    }
    Vue.component('CommonHead', CommonHead);
    const vm = new Vue({
        el: '#app'
    })
</script>
</body>
</html>